<!DOCTYPE html>
<html>
<title>This tests that controls are properly updated when stopImmediatePropagation is used in event handler.</title>
<script src="../media-controls.js"></script>
<div>
  <audio></audio>
</div>
<div>
  <video></video>
</div>
<div id='a'>
</div>
<div id='v'>
</div>
<script>
  // Elements created from script.
  var audio = document.createElement('audio');
  audio.onvolumechange = e => { e.stopImmediatePropagation() };
  document.querySelector('#a').appendChild(audio);
  audio.src = '../content/test.oga';
  audio.controls = true;
  enableTestMode(audio);
  audio.onloadedmetadata = () => { audio.muted = true; }

  var video = document.createElement('video');
  video.onvolumechange = e => { e.stopImmediatePropagation() };
  document.querySelector('#v').appendChild(video);
  video.src = '../content/test.ogv';
  video.controls = true;
  enableTestMode(video);
  video.onloadedmetadata = () => { video.muted = true; }

  // Elements created during parsing.
  var audio = document.querySelector('audio');
  audio.onvolumechange = e => { e.stopImmediatePropagation() };
  audio.src = '../content/test.oga';
  audio.controls = true;
  enableTestMode(audio);
  audio.muted = true;

  var video = document.querySelector('video');
  video.onvolumechange = e => { e.stopImmediatePropagation() };
  video.src = '../content/test.ogv';
  video.controls = true;
  enableTestMode(video);
  video.muted = true;
</script>
</html>
